<%--
  Created by IntelliJ IDEA.
  User: ChenTong
  Date: 2020/6/1
  Time: 0:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<% String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/"; %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="user" uri="/WEB-INF/user.tld" %>
<!Doctype html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <title>用户管理</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="static/css/style.css">
    <link rel="stylesheet" href="static/js/jquery-ui/jquery-ui.min.css">
    <script src="static/js/jquery-3.3.1.min.js"></script>
    <script src="static/js/jquery.serializejson.min.js"></script>
    <script src="static/js/jquery-ui/jquery-ui.min.js"></script>
</head>
<body>
    <p>在线用户 ${sessionScope.name}</p>
    目前共有<span class="salient"> <%=application.getAttribute("count")%> </span>人在线
    <!-- 用户列表 -->
<%--    <div class="tbl-title">用户列表</div>--%>
<%--    <button onclick="showAddUserModal()">添加新的用户</button>--%>
<%--    <table id="users" class="tbl-list">--%>
<%--        <caption>展示用户信息</caption>--%>
<%--        <!--展示用户信息 -->--%>
<%--        <thead>--%>
<%--        <tr>--%>
<%--            <th id="id">ID</th>--%>
<%--            <th id="password">密码</th>--%>
<%--            <th id="name">用户名</th>--%>
<%--            <th id="code">Code</th>--%>
<%--            <th id="operation">操作</th>--%>
<%--        </tr>--%>
<%--        </thead>--%>
<%--        <tbody>--%>

<%--    </table>--%>



<%--    <!-- 添加用户模态框 -->--%>
<%--    <div id="add-user-modal" title="添加用户" style="display:none;">--%>
<%--        <form id="add-user-form">--%>

<%--            <table class="modal-tbl"><!--展示用户信息 -->--%>
<%--                <caption>展示用户信息</caption>--%>
<%--                <th id="th1"></th>--%>
<%--                <tr><td>ID</td><td><input type="text" name="id"></td></tr>--%>
<%--                <tr><td>密码</td><td><input type="password" name="password"></td></tr>--%>
<%--                <tr><td>用户名</td><td><input type="text" name="name"></td></tr>--%>
<%--                <tr><td>Code</td><td><input type="text" name="code"></td></tr>--%>
<%--            </table>--%>
<%--        </form>--%>
<%--    </div>--%>
<%--    <!--删除用户对话模态框 -->--%>
<%--    <div id="delete-user-modal" title="删除用户" style="display:none;">--%>
<%--        <p>确定删除该用户吗？</p>--%>
<%--    </div>--%>
<%--    <!-- 更新用户模态框 -->--%>
<%--    <div id="update-user-modal" title="更新用户" style="display:none;">--%>
<%--        <form id="update-user-form">--%>
<%--            <table class="modal-tbl">--%>
<%--                <caption>展示用户信息</caption>--%>
<%--                <th id="th2"></th>--%>
<%--                <!--展示用户信息 -->--%>
<%--                <tr style="display: none"><td>ID</td><td><input type="text" name="id"></td></tr>--%>
<%--                <tr><td>账户</td><td><input type="text" name="id"></td></tr>--%>
<%--                <tr><td>密码</td><td><input type="password" name="password"></td></tr>--%>
<%--                <tr><td>姓名</td><td><input type="text" name="name"></td></tr>--%>
<%--                <tr><td>Code</td><td><input type="text" name="code"></td></tr>--%>
<%--            </table>--%>
<%--        </form>--%>
<%--    </div>--%>
<%--    <!-- 提示信息模态框 -->--%>
<%--    <div id="msg-modal" title="" style="display:none">--%>
<%--        <p></p>--%>
<%--    </div>--%>
<script>
    // $(function() {
    //     listAllUser();
    // });
    // function listAllUser() {
    //     $.ajax({
    //         type: "GET",
    //         url: "listAllUser",
    //         dataType: "json",
    //         success: function(data) {
    //             $("#users tbody").empty();  // 每次载入前先清空显示区域，防止数据重复显示
    //             var users = data;
    //             for (var i in users) {
    //                 var user = users[i];
    //                 var userStr = JSON.stringify(user);
    //                 $("#users tbody").append(
    //                     '<tr><td>' + user.id + '</td>'
    //                     + '<td>' + user.password + '</td>'
    //                     + '<td>' + user.name + '</td>'
    //                     + '<td>' + user.code + '</td>'
    //                     + '<td><button onclick=\'showUpdateUserModal(' + userStr + ')\'>更新</button> '
    //                     + '<button onclick="deleteUser(' + user.id + ')">删除</button></td></tr>');
    //             }
    //         },
    //         error: function() {
    //             console.log("ajax error");
    //         }
    //     });
    // }
    // // 显示添加用户模态框
    // function showAddUserModal() {
    //     $("#add-user-form")[0].reset();  // 每次载入前先清空表单，防止显示之前的信息
    //     $("#add-user-modal").dialog({
    //         resizable: false,
    //         modal: true,
    //         buttons: {
    //             "提交": function() {
    //                 addUser();
    //             },
    //             "取消": function() {
    //                 $(this).dialog("close");
    //             },
    //         },
    //     });
    // }
    // // 添加用户
    // function addUser() {
    //     var user = $("#add-user-form").serializeJSON();
    //     var userStr = JSON.stringify(user);
    //     $.ajax({
    //         type: "POST",
    //         url: "addUser",
    //         data: userStr,
    //         dataType: "json",
    //         success: function(data) {
    //             if (data.isSuccess) {
    //                 $("#add-user-modal").dialog("close");
    //                 showMsg('添加成功！');
    //                 listAllUser();
    //             } else {
    //                 $("#add-user-modal").dialog("close");
    //                 showMsg('添加失败！');
    //                 listAllUser();
    //             }
    //         },
    //         error: function() {
    //             console.log("ajax error");
    //         },
    //     });
    // }
    // // 删除用户
    // function deleteUser(id) {
    //     // 将id封装为JSON格式数据
    //     var data = {};
    //     data.id = id;
    //     var dataStr = JSON.stringify(data);
    //     // 显示删除用户模态框
    //     $("#delete-user-modal").dialog({
    //         resizable: false,
    //         modal: true,
    //         buttons: {
    //             "确认": function() {
    //                 $.ajax({
    //                     type: "POST",
    //                     url: "removeUser",
    //                     data: dataStr,
    //                     dataType: "json",
    //                     success: function(data) {
    //                         if (data.isSuccess) {
    //                             $("#delete-user-modal").dialog("close");
    //                             showMsg('删除成功！');
    //                             listAllUser();
    //                         } else {
    //                             $("#delete-user-modal").dialog("close");
    //                             showMsg('删除失败！');
    //                             listAllUser();
    //                         }
    //                     },
    //                     error: function() {
    //                         console.log("ajax error");
    //                     },
    //                 });
    //             },
    //             "取消": function() {
    //                 $(this).dialog("close");
    //             },
    //         },
    //     });
    // }
    // //显示更新用户模态框
    // function showUpdateUserModal(user) {
    //     $("#update-user-form")[0].reset();  // 每次载入前先清空表单，防止显示之前的信息
    //     // 表单赋值
    //     $("#update-user-form input[name='id']").val(user.id);
    //     $("#update-user-form input[name='account']").val(user.account);
    //     $("#update-user-form input[name='password']").val(user.password);
    //     $("#update-user-form input[name='name']").val(user.name);
    //     $("#update-user-form input[name='info']").val(user.info);
    //     $("#update-user-modal").dialog({
    //         resizable: false,
    //         modal: true,
    //         buttons: {
    //             "提交": function () {
    //                 updateUser();
    //             },
    //             "取消": function () {
    //                 $(this).dialog("close");
    //             }
    //         }
    //     });
    // }
    // // 更新用户
    // function updateUser() {
    //     // 获取序列化表单信息
    //     var user = $("#update-user-form").serializeJSON();
    //     var userStr = JSON.stringify(user);
    //
    //     $.ajax({
    //         type: "POST",
    //         url: "updateUser",
    //         data: userStr,
    //         contentType: 'application/json;charset=utf-8',
    //         dataType: "json",
    //         success: function(data) {
    //             if (data.isSuccess) {
    //                 $("#update-user-modal").dialog("close");
    //                 showMsg('更新成功！');
    //                 listAllUser();
    //             } else {
    //                 $("#update-user-modal").dialog("close");
    //                 showMsg('更新失败！');
    //                 listAllUser();
    //             }
    //         },
    //         error: function() {
    //             console.log("ajax error");
    //         }
    //     });
    // }
    //
    // //显示提示信息
    // function showMsg(text) {
    //     $("#msg-modal p").text(''); // 每次载入前先清空显示区域，防止显示之前的信息
    //     $("#msg-modal p").text(text);
    //     $("#msg-modal").dialog({
    //         modal: true,
    //     });
    //     // 2s后消失
    //     setTimeout(function() {
    //         $("#msg-modal").dialog("close")
    //     },2000);
    // }
</script>
</body>
</html>
